<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    .v-com.product-card{
        width: 100%;
        padding-bottom: 20px;
        // border:1px solid #E5E5E5;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        .product-card__cover{
            font-size: 0;
            vertical-align: top;
            width: 100%;
            padding: 50% 0;
            // &> img {
            //     top: 0;
            //     max-width: 100%;
            //     max-height: 100%;
            //     transform: translate(-50%, -50%);
            //     left: 50%;
            //     top: 50%;
            //     position: absolute;
            // }
            background-size:cover;
            background-position: center;
        }
        .product-card__title{
            margin: 10px;
            font-size:14px;
            font-weight:400;
            line-height:21px;
            color:#666666;
            height: 42px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
             /* @link https://github.com/fanyifanbumaimeng/Articles/issues/48 */
        }
        .product-card__count{
            height:30px;
            line-height: 30px;
            background:#E6F2FF;
            border-radius:15px;
            padding: 0 18px;
            color: #2D8CF0;
            text-align: center;
            display: inline-block;
            margin-top: 10px;
            margin-left: 10px;
            font-size: 10px;
        }
        .product-card__mark{
            top: 0;
            left: 0;
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            margin-left: -50px;
            margin-top: -50px;
            border-radius: 50%;
            background: #5AA1F5;
            &>.ivu-icon{
                 position: absolute;
                 right: 20px;
                 bottom: 20px;
            }
        }
    }

</style>

<template>
	<div class="v-com product-card">
		<div
			v-if="isSelected"
			class="product-card__mark">
			<Icon
				size="20"
				type="checkmark"
				color="#ffffff"/>
		</div>
		<div
			:style="coverStyle"
			class="product-card__cover">
			<!-- <img
				:src="image"
				alt="cover"> -->
		</div>
		<p
			:title="title"
			class="product-card__title">
			{{ title }}
		</p>
		<span class="product-card__count">
			{{ this.$t('share_product.cite_count', {'count':count}) }}
		</span>
	</div>
</template>

<script>
export default {
	name: 'ShareProductProductCard',
	props: {
		image: {
			type: String,
			default() {
				return ''; //
			},
		},
		title: {
			type: String,
			default() {
				return this.$t('common.none');
			},
		},
		selected: {
			type: Boolean,
			default() {
				return false;
			},
		},
		count: {
			type: Number,
			default() {
				return 0;
			},
		},
	},
	data() {
		return {};
	},
	computed: {
		isSelected() {
			return this.selected;
		},
		coverStyle() {
			return this.image ? { backgroundImage: `url("${this.image}")` } : {};
		},
	},
	methods: {},
};
</script>
